<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .ring-wrap{
            width: 100px;  
            height: 100px;  
            position: relative;
            margin:20px auto 50px;
        }
        .ring-box,.ring-circle,.ring-percent{  
            position: absolute;  
            width: 100px;  
            height: 100px;  
            border-radius: 50%;  
        }  
        .ring-box{  
            top:0px;  
            left:0px;  
            background-color: #f1f1f1;  
        }  
        .ring-circle{  
            box-sizing: border-box;  
            border:8px solid #f1f1f1;  
            clip:rect(0,100px,100px,50px);  
        }  
        .ring-clip-auto{  
            clip:rect(auto, auto, auto, auto);  
        }  
        .ring-percent{  
            box-sizing: border-box;  
            top:-8px;  
            left:-8px;  
        }  
        .ring-left{  
            transition:transform ease;  
            border:8px solid #8c4ccb;  
            clip: rect(0,50px,100px,0);  
        }  
        .ring-right{  
            border:8px solid #8c4ccb;  
            clip: rect(0,100px,100px,50px);  
        }  
        .ring-wth0{  
            width:0;  
        }  
        .ring-num{  
            position: absolute;  
            box-sizing: border-box;  
            width: 84px;  
            height: 84px;  
            line-height: 84px;  
            text-align: center;   
            left: 8px;  
            top: 8px;  
            border-radius: 50%;  
            background-color: #fff;  
            z-index: 1;  
            color:#8c4ccb;
            font-size:18px;
            font-weight:bold;
        }  
    </style>
    <script src="js/zepto.min.js"></script>
</head>

<body>
    <div class="ring-wrap">
        <div class="ring-box">
            <div class="ring-circle">
                <div class="ring-percent ring-left"></div>
                <div class="ring-percent ring-right ring-wth0"></div>
            </div>
            <div class="ring-num"><span>53</span>%</div>
        </div>
    </div>
    <div class="ring-wrap">
        <div class="ring-box">
            <div class="ring-circle">
                <div class="ring-percent ring-left"></div>
                <div class="ring-percent ring-right ring-wth0"></div>
            </div>
            <div class="ring-num"><span>80</span>%</div>
        </div>
    </div>
</body>
<script>
    $(".ring-wrap").each(function () {
        var percent = $(this).find('.ring-num span').html();
        if (percent > 100) {
            percent = 0;
            $(this).find('.ring-circle').removeClass('ring-clip-auto');
            $(this).find('.ring-right').addClass('ring-wth0');
        } else if (percent > 50) {
            $(this).find('.ring-circle').addClass('ring-clip-auto');
            $(this).find('.ring-right').removeClass('ring-wth0');
        }
        $(this).find('.ring-left').css("-webkit-transform", "rotate(" + (18 / 5) * percent + "deg)");
        $(this).find('.ring-num>span').text(percent);
    })

</script>

</html>